<template>
  <div class="container-big">
    <div style="padding-bottom: 436px;" class="container padding-top">
      <div class="container-nav-fix-box">
        <div class="container-nav-box maxWidth cenCen">
          <div @click="changeNav(true)" :style="[{color: thisNav?$store.state.themeColor:'#fff'}]" class="container-nav cenCen">
            中文
            <div v-if="thisNav" :style="[{backgroundColor: thisNav?$store.state.themeColor:'#fff'}]" class="nav-borderBottom"></div>
          </div>
          <div @click="changeNav(false)" :style="[{color: !thisNav?$store.state.themeColor:'#fff'}]" class="container-nav cenCen">
            English
            <div v-if="!thisNav" :style="[{backgroundColor: !thisNav?$store.state.themeColor:'#fff'}]" class="nav-borderBottom"></div>
          </div>
        </div>
      </div>
      <banner />
      <!-- <div class="uncan-right" /> -->
      <!-- <div class="uncan-right-icon">
        <img src="https://gw.alicdn.com/tfs/TB1Gq7SHXzqK1RjSZFvXXcB7VXa-270-419.png">
      </div>-->
      <!-- :style="initHeight(formJson.length)" -->
      <div v-if="thisNav" class="from-box">
        <div v-if="formJson.length!=0" class="from-tit cenLeft">
          <img src="https://gw.alicdn.com/tfs/TB1vpgTHcbpK1RjSZFyXXX_qFXa-200-200.png">
          请务必填写本人真实准确的参会信息。您填写的参会信息仅姓氏和单位名称将同步给邀请码分发人做校对。
        </div>
        <div v-if="formJson.length!=0" style="padding: 0px 16px;" class="from">
          <div v-for="(item,index) of formJson " :key="index" style="padding: 0px;position: relative;" class="from-item">
            <inputText v-if="item.componentName=='stringTem'" :this-componen="item" :isReadonly="isReadonly" />
            <inputNumber v-if="item.componentName=='numberTem'" :this-componen="item" :isReadonly="isReadonly" />
            <moreSelect v-if="item.componentName=='moreSelectTem'&&item.attribute.filedCode!='typeOfCertificate'" :this-componen="item" :isReadonly="isReadonly" />
            <!-- 证件类型组件特殊处理 -->
            <moreSelect v-if="item.componentName=='moreSelectTem'&&item.attribute.filedCode=='typeOfCertificate'" :this-componen="item" :isReadonly="isChangeType" />
            <div @click="getAuthCode()" v-if="item.attribute.filedCode=='uTel'" class="getCode-box cenCen">
              <div class="getCode">{{authCodeTime>=60?'获取验证码':`${authCodeTime}s`}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 海外激活部分 -->
      <div v-else class="from-box">
        <div v-if="overseasFromField.length!=0" class="from-tit cenLeft">
          <img src="https://gw.alicdn.com/tfs/TB1vpgTHcbpK1RjSZFyXXX_qFXa-200-200.png">
          Please enter the information of attendee. Please also be aware that the inviter will be informed of your name and company name.
        </div>
        <div v-if="overseasFromField.length!=0" style="padding: 0px 16px;" class="from">
          <div @click="enteruEmail(item.attribute.filedCode,item)" v-for="(item,index) of overseasFromField " :key="index" style="padding: 0px;position: relative;" class="from-item">
            <inputTextEng v-if="item.componentName=='stringTem'" :this-componen="item" :isReadonly="item.attribute.filedCode=='uEmail'||isReadonly" />
            <moreSelectEng v-if="item.componentName=='moreSelectTem'" :this-componen="item" :isReadonly="isReadonly" />
          </div>
        </div>
      </div>
      <!-- 服务协议 -->
      <!-- v-if="agreement.length" -->
      <div class="agree-box">
        <span @click="ifAgree=!ifAgree" class="agree-check cenCen">
          <img v-if="!ifAgree" src="https://img.alicdn.com/tfs/TB1gLM9Q7voK1RjSZFwXXciCFXa-200-200.png">
          <img v-else src="https://img.alicdn.com/tfs/TB1fLM9Q7voK1RjSZFwXXciCFXa-200-200.png">
        </span>

        <span @click="ifAgree=!ifAgree" class="readAndAgree" style=" color: #fff;text-align:left;">{{thisNav?'我已仔细阅读并同意':' I have read and agree Registration Statement of Apsara Conference'}}</span>
        <br />
        <br />
        <span v-if="thisNav">
          <a class="readAndAgree" target="_blank" style="  font-weight: bold;text-decoration: underline;" @click="openPage()" ref="javascript:void(0);" :style="[{color:$store.state.themeColor}]">《云栖大会报名服务协议》</a>
        </span>
        <span v-else @click="openEngPage()" style="  font-weight: bold;text-decoration: underline;" :style="[{color:$store.state.themeColor}]" class="readAndAgree">
          《Alibaba Cloud Event Registration Terms and Conditions (“Terms”)》
        </span>
      </div>
    </div>
    <div class="screen-fixed-box cenCen">
      <div :class="{'from-saveBtn-ifAgree':ifAgree&&ifClick}" v-if="formJson.length!=0&&!isReadonly&&thisNav" class="from-saveBtn cenCen" @click="checkFormJson()">确定激活</div>
      <div @click="checkEngFormJson()" :class="{'from-saveBtn-ifAgree':ifAgree&&ifClick}" v-if="!thisNav" class="from-saveBtn cenCen">Activate My Ticket</div>
    </div>

    <!-- 邮箱弹框 -->
    <div v-if="EmailAlert" @click.self="EmailAlert=false" class="email-alert">
      <div class="email-box maxWidth-son">
        <div class="email-tit">Email</div>
        <div class="email-input">
          <input :style="[{color:$store.state.themeColor}]" v-model.trim="form.Email" placeholder="Please enter ">
        </div>
        <div style="padding:0px ;margin-top:0px " class="Agre-box">
          <div style="width:20%;cursor: pointer;" class="Agre-img">
            <img @click="checkEmile=true" v-if="!checkEmile" src="https://gw.alicdn.com/tfs/TB19E4LFuSSBuNjy0FlXXbBpVXa-64-64.png">
            <img @click="checkEmile=false" v-if="checkEmile" src="https://gw.alicdn.com/tfs/TB1S_ngFv1TBuNjy0FjXXajyXXa-64-64.png">
          </div>
          <div style="width:80%" :style="[{color:$store.state.themeColor}]" class="Agre-tit">I agree to receiving news relating to Apsara Conference and promotional materials from Alibaba Cloud</div>
        </div>
        <div @click="sendVeryfing()" v-if="checkEmile" style=" cursor: pointer;" class="email-btn">Send Verifying Code to my Mailbox</div>
        <div v-if="!checkEmile" style="background:#ccc;" class="email-btn">Send Verifying Code to My Mailbox</div>
      </div>
    </div>
  </div>
</template>
<script>
// 表单组件部分
import inputText from "@/router/infoEntry/assembly/inputText"; //input type为text 组件
import inputNumber from "@/router/infoEntry/assembly/inputNumber"; //input type为number 组件
import moreSelect from "@/router/infoEntry/assembly/moreSelect.vue"; //多选组件
import banner from "@/router/orderEnter/banner/banner";
import testJson from "./../../infoEntry/testJson.json";
import service from "@/api/mine";
import buyTicketService from "@/api/buyTicketService.js";
import overseasFromField from "./overseas/overseasFromField";

import { idcardReg } from "./../../reg/idCard";

// 海外部分
// 表单组件部分
import inputTextEng from "./assembly/inputText"; //input type为text 组件
import moreSelectEng from "./assembly/moreSelect.vue"; //多选组件
// import textYun from "./textYun";
export default {
  components: {
    inputText,
    inputNumber,
    moreSelect,
    banner,
    inputTextEng,
    moreSelectEng
  },
  data() {
    return {
      form: {
        Email: ""
      },
      checkEmile: false,
      isChangeType: false, //是否可以改变证件类型
      provinceFiled: {}, //省份份字段
      isUrl: true, // 是否展示导航栏
      EmailAlert: false, //Email弹框
      // 海外激活部分
      overseasFromField: [], //海外表单
      inviteCodeFieldEng: {
        attribute: {
          filedValue: "",
          filedCode: "inviteCode",
          titName: "Invitation Code",
          placeholder: "Please Enter",
          maxLength: 20,
          ifCheck: true
        },
        componentName: "stringTem"
      }, //激活码字段英文
      authCodeFieldEng: {
        attribute: {
          filedValue: "",
          filedCode: "verifiCode",
          titName: "Verifying Code",
          placeholder: "Please Enter",
          maxLength: 6,
          ifCheck: true
        },
        componentName: "stringTem"
      }, //验证码字段
      // 海外激活部分
      thisNav: true, //默认中文
      agreement: [], //服务协议
      inviteCodeField: {
        attribute: {
          filedValue: "",
          filedCode: "inviteCode",
          titName: "激活码",
          placeholder: "请输入",
          maxLength: 20,
          ifCheck: true
        },
        componentName: "stringTem"
      }, //激活码字段
      authCodeField: {
        attribute: {
          filedValue: "",
          filedCode: "verifiCode",
          titName: "验证码",
          placeholder: "请输入",
          maxLength: 6,
          ifCheck: true
        },
        componentName: "stringTem"
      }, //验证码字段
      activityId: "",
      inviteCode: "", //激活码
      authCodeTime: 60, //验证码时间
      ifAgree: false, //服务协议
      ifClick: true, //是否可以点击，防止重复点击
      isReadonly: false, //是否只读
      formJson: [] //表单json
    };
  },
  created() {
    this.initFun();
    if (sessionStorage.getItem("thisNav") === "false") {
      this.thisNav = false;
    }
    if (sessionStorage.getItem("ifAgree") === "true") {
      this.ifAgree = true;
    }
  },
  methods: {
    async initFun() {
      this.activityId = this.getUrl("activityId");
      this.inviteCode = this.getUrl("inviteCode");
      if (!this.activityId) {
        this.$toast("必要参数丢失");
        return;
      }
      this.getoverseasFromField();
      this.getFromField();
    },
    // 获取url参数
    getUrl(parameter) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + parameter + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || ""
      );
    },
    changeNav(val) {
      this.thisNav = val;
      sessionStorage.setItem("thisNav", this.thisNav);
    },
    // 海外激活部分
    // 得到海外激活表单字段
    getoverseasFromField() {
      this.overseasFromField = JSON.parse(JSON.stringify(overseasFromField));
      let inviteCodeFieldEng = JSON.parse(
        JSON.stringify(this.inviteCodeFieldEng)
      );
      inviteCodeFieldEng.attribute.filedValue = this.inviteCode;
      this.overseasFromField.push(inviteCodeFieldEng); //添加激活码字段
      for (let i = 0; i < this.overseasFromField.length; i++) {
        if (this.overseasFromField[i].attribute.filedCode == "uEmail") {
          let authCodeFieldEng = JSON.parse(
            JSON.stringify(this.authCodeFieldEng)
          );
          this.overseasFromField.splice(i + 1, 0, authCodeFieldEng); //添加验证码字段
        }
      }
      // 缓存数据
      if (sessionStorage.getItem("overseasFromField")) {
        let overseasFromField = JSON.parse(
          sessionStorage.getItem("overseasFromField")
        );

        let areaCode = "852";
        overseasFromField.map(item => {
          if (item.attribute.filedCode == "uTel") {
            areaCode = item.attribute.areaCode;
          }
          for (let i = 0; i < this.overseasFromField.length; i++) {
            if (this.overseasFromField[i].attribute.filedCode == "uTel") {
              this.overseasFromField[i].attribute.areaCode = areaCode;
            }
            if (
              item.attribute.filedCode ==
              this.overseasFromField[i].attribute.filedCode
            ) {
              this.overseasFromField[i].attribute.filedValue =
                item.attribute.filedValue;
            }
          }
        });
      }
    },
    email(email) {
      let reg = /@/g;
      return reg.test(email);
    },
    // 发送验证码到邮箱
    async sendVeryfing() {
      if (!this.form.Email || !this.email(this.form.Email)) {
        this.$toast("Please enter your email address");
        return;
      }
      this.$store.state.loading = true;
      // Email sending failed. Please try another email address
      // Submission failure
      // 调接口 getEngVerificationCode
      const { success = false } = await service.getEngVerificationCode({
        uEmail: this.form.Email
      }); //获取验证码接口
      this.$store.state.loading = false;
      // const success = true;
      if (success) {
        this.EmailAlert = false;
        for (let i = 0; i < this.overseasFromField.length; i++) {
          if (this.overseasFromField[i].attribute.filedCode == "uEmail") {
            this.overseasFromField[i].attribute.filedValue = this.form.Email;
          }
        }
        this.$toast("Submission completed");
      }
    },
    // 海外选择enteruEmail
    enteruEmail(filedCode, data) {
      if (filedCode == "uEmail") {
        this.EmailAlert = true;
        this.form.Email = data.attribute.filedValue || "";
        // data.attribute.filedValue !== "" ? data.attribute.filedValue : "";
      }
    },
    // 海外激活
    async checkEngFormJson() {
      if (!this.ifAgree) {
        this.$toast(
          "Please read it carefully 《Alibaba Cloud Event Registration Terms and Conditions (“Terms”)》"
        );
        return;
      }
      if (!this.ifClick) {
        return;
      }
      this.ifClick = false;
      setTimeout(() => {
        this.ifClick = true;
      }, 1500);
      let resData = await this.checkFromItem(this.overseasFromField);
      if (resData) {
        let subData = {
          activityId: this.activityId,
          corpId: sessionStorage.getItem("corpIdUcan"),
          ticketList: []
        };
        let uName = "";
        this.overseasFromField.map(item => {
          if (item.attribute.filedCode == "inviteCode") {
            subData.ticketList.push(item.attribute.filedValue);
          }
          if (
            item.attribute.filedCode == "FirstName" ||
            item.attribute.filedCode == "LastName"
          ) {
            uName += "" + item.attribute.filedValue + ` `;
          } else {
            subData[item.attribute.filedCode] = item.attribute.filedValue;
          }
          if (item.attribute.filedCode == "uTel") {
            subData.uTel =
              "+" + item.attribute.areaCode + "-" + item.attribute.filedValue;
            // subData.countryCode = item.attribute.areaCode; //如果是手机号传区号
          }
        });
        subData.uName = uName;
        console.log(subData);
        this.$store.state.loading = true;
        const { success = false } = await service.dynamicEngActive(subData); //获取验证码接口
        this.$store.state.loading = false;
        if (success) {
          sessionStorage.removeItem("overseasFromField");
          await this.$confirm(
            "Your registration is completed. You will receive a confirmation email soon.",
            {
              title: "Tip",
              okLabel: "OK",
              showCancel: false
            }
          );
        }
      }
    },
    // 海外激活部分
    // 获取表单字段
    async getFromField() {
      this.$store.state.loading = true;
      const { data = [] } = await service.queryTempletByActivityId({
        activityId: this.activityId,
        isPay: "pay"
      });
      sessionStorage.setItem("corpIdUcan", data.corpId);
      this.$store.state.loading = false;
      if (data.vnote1) {
        this.formJson = JSON.parse(data.vnote1);
        console.log(this.formJson, "this.formJson");
        //云栖大会的把手机号移到下面防止验证码过期
        if (this.activityId == 33) {
          let uTelObj = {};
          for (let i = 0; i < this.formJson.length; i++) {
            if (this.formJson[i].attribute.filedCode == "uTel") {
              uTelObj = this.formJson[i];
              this.formJson.splice(i, 1);
            }
          }
          this.formJson.push(uTelObj);
        }
      }
      // this.formJson = textYun.vnote1;
      for (let i = 0; i < data.agreeList.length; i++) {
        if (data.agreeList[i].typeId == 1) {
          this.agreement.push(data.agreeList[i]);
        }
      }
      // this.formJson = testJson; //测试
      let inviteCodeField = JSON.parse(JSON.stringify(this.inviteCodeField));
      inviteCodeField.attribute.filedValue = this.inviteCode;
      this.formJson.push(inviteCodeField); //添加激活码字段
      for (let i = 0; i < this.formJson.length; i++) {
        if (this.formJson[i].attribute.filedCode == "uTel") {
          let authCodeField = JSON.parse(JSON.stringify(this.authCodeField));
          this.formJson.splice(i + 1, 0, authCodeField); //添加验证码字段
        }
      }
      for (let i = 0; i < this.formJson.length; i++) {
        if (
          this.formJson[i].attribute.filedCode == "country" &&
          this.formJson[i].attribute.filedValue == "中国大陆"
        ) {
          this.isChangeType = true;
        }
        if (this.formJson[i].attribute.filedCode == "province") {
          // 存储省份字段
          this.provinceFiled = {
            index: i,
            value: this.formJson[i]
          };
        }
      }
      this.addAreaCode();
      this.getSessionForm();
    },
    // 中文激活，如果有缓存则赋值
    async getSessionForm() {
      if (sessionStorage.getItem("formJson")) {
        let formJson = JSON.parse(sessionStorage.getItem("formJson"));
        formJson.map(el => {
          // if (el.attribute.filedCode === "verifiCode") {
          //   el.attribute.filedValue = "";
          // }
          if (el.attribute.filedCode == "country") {
            if (el.attribute.filedValue == "中国大陆") {
              this.isChangeType = true;
            } else {
              this.isChangeType = false;
            }
          }
        });
        for (let i = 0; i < formJson.length; i++) {
          for (let j = 0; j < this.formJson.length; j++) {
            if (
              this.formJson[j].attribute.filedCode ===
              formJson[i].attribute.filedCode
            ) {
              this.formJson[j].attribute.filedValue =
                formJson[i].attribute.filedValue;
            }
          }
        }
        let isExitprovince = await this.checkFormProvince(formJson);
        if (!isExitprovince) {
          this.formJson.splice(this.provinceFiled.index, 1);
        }
        // this.formJson = JSON.parse(JSON.stringify(formJson));
      }
    },
    checkPhone(phone) {
      if (!/^1[3456789]\d{9}$/.test(phone)) {
        return false;
      } else {
        return true;
      }
    },
    // 检验缓存表单中是否有省份
    checkFormProvince(form) {
      let value = false;
      for (let i = 0; i < form.length; i++) {
        if (form[i].attribute.filedCode == "province") {
          value = true;
        }
      }
      return new Promise(resolve => {
        resolve(value);
      });
    },
    // 关于手机号uTel增加区号字段
    addAreaCode() {
      for (let i = 0; i < this.formJson.length; i++) {
        if (this.formJson[i].attribute.filedCode == "uTel") {
          this.$set(this.formJson[i].attribute, "areaCode", "86");
        }
      }
    },
    // 获取新的协议页面
    // agreementId
    openPage() {
      sessionStorage.setItem("formJson", JSON.stringify(this.formJson));
      sessionStorage.setItem("thisNav", this.thisNav);
      sessionStorage.setItem("ifAgree", this.ifAgree);
      this.$router.push({
        path: "/mine/agreementChine"
      });
      // buyTicketService.lookAgreement(agreementId).then(res => {
      //   if (res.success) {
      //     window.location.href = res.result;
      //   }
      // });
    },
    // 海外激活页面
    openEngPage() {
      sessionStorage.setItem(
        "overseasFromField",
        JSON.stringify(this.overseasFromField)
      );
      sessionStorage.setItem("thisNav", this.thisNav);
      sessionStorage.setItem("ifAgree", this.ifAgree);
      this.$router.push({
        path: "/mine/agreement"
      });
    },
    // 获取验证码
    async getAuthCode() {
      if (this.authCodeTime < 60) {
        return;
      }
      let phoneNumber = "";
      let countryCode = "";
      for (let i = 0; i < this.formJson.length; i++) {
        if (this.formJson[i].attribute.filedCode == "uTel") {
          phoneNumber = this.formJson[i].attribute.filedValue;
          countryCode = this.formJson[i].attribute.areaCode;
        }
      }
      if (!phoneNumber) {
        this.$toast("手机号不能为空");
        return;
      }
      if (phoneNumber.length != 11 || !this.checkPhone(phoneNumber)) {
        this.$toast("请填写正确的手机号码");
        return;
      }
      this.$store.state.loading = true;
      const { success = false } = await service.getVerificationCode({
        uTel: phoneNumber,
        countryCode: countryCode,
        activityId: this.activityId
      }); //获取验证码接口
      this.$store.state.loading = false;
      // 如果接口成功则倒计时
      if (success) {
        this.$toast("验证码发送成功");
        this.getAuthCodeTime();
      }
    },
    // 获取验证码时间
    getAuthCodeTime() {
      this.authCodeTime--;
      if (this.authCodeTime > 0) {
        setTimeout(() => {
          this.getAuthCodeTime();
        }, 1000);
      }
      if (this.authCodeTime <= 0) {
        this.authCodeTime = 60;
      }
    },
    // 检验表单信息是否符合要求
    async checkFormJson() {
      if (!this.ifAgree) {
        let text = "请您务必仔细阅读《云栖大会报名服务协议》";
        // for (let i = 0; i < this.agreement.length; i++) {
        //   text += `《${this.agreement[i].title}》`;
        // }
        this.$toast(text);
        return;
      }
      if (!this.ifClick) {
        return;
      }
      this.ifClick = false;
      setTimeout(() => {
        this.ifClick = true;
      }, 1500);
      //填写表单的集合数据及认证是否必填项为空
      let resData = await this.checkFromItem(this.formJson);
      if (resData) {
        this.$store.state.loading = true;
        let subData = {
          activityId: this.activityId,
          isPay: "pay",
          inviteCodeList: []
        };
        this.formJson.map(item => {
          if (item.attribute.filedCode == "uTel") {
            subData.countryCode = item.attribute.areaCode; //如果是手机号传区号
          }
          if (item.attribute.filedCode == "inviteCode") {
            subData.inviteCodeList.push(item.attribute.filedValue);
          } else {
            subData[item.attribute.filedCode] = item.attribute.filedValue;
          }
        });
        let isProvince = await this.checkFormProvince(this.formJson); //检验表单中有没有省份字段
        // && this.activityId == 33
        if (!isProvince) {
          // 云栖大会活动Id = 33
          subData.province = "abroad"; // 表单添加省份字段
        }
        console.log(subData);
        const { success = false } = await service.dynamicActive(subData); //获取验证码接口
        this.$store.state.loading = false;
        if (success) {
          sessionStorage.removeItem("formJson");
          this.$router.push({
            path: "/mine/registerSuccess"
          });
        }
      }
    },
    // 检验表单字段中是否有省份字段
    checkFormJsonHaveprovince(isChine) {
      return new Promise(resolve => {
        let value = false;
        for (let i = 0; i < this.formJson.length; i++) {
          if (this.formJson[i].attribute.filedCode == "province") {
            value = true;
          }

          if (
            this.formJson[i].attribute.filedCode == "typeOfCertificate" &&
            isChine
          ) {
            this.formJson[i].attribute.filedValue = "居民身份证"; //国籍改变
          }
        }
        resolve(value);
      });
    },
    // 当国籍发生变化时候
    async countryChange(isChine) {
      this.isChangeType = isChine; // 是否可以改变证件类型
      const haveprovince = await this.checkFormJsonHaveprovince(isChine);
      if (!isChine && haveprovince) {
        //如果是国外并且有省份字段,则去掉省份
        this.formJson.splice(this.provinceFiled.index, 1);
      }
      if (isChine && !haveprovince) {
        //如果是国内并且没有有省份字段,则添加省份
        this.formJson.splice(
          this.provinceFiled.index,
          0,
          this.provinceFiled.value
        );
      }
    },

    // 验证表格里面的每一项
    checkFromItem(formList) {
      let ifCheckAll = true; //是否检查完了全部(每一个必填项信息)
      for (let i = 0; i < formList.length; i++) {
        if (
          formList[i].attribute.ifCheck &&
          !formList[i].attribute.filedValue
        ) {
          ifCheckAll = false;
          this.$toast(
            `${
              formList[i].attribute.placeholder
                ? formList[i].attribute.placeholder
                : "请填写"
            }${this.thisNav ? "" : ` `}${formList[i].attribute.titName}`
          );
          break;
        } else if (
          //验证邮箱
          formList[i].attribute.ifCheck &&
          formList[i].attribute.filedValue &&
          formList[i].attribute.filedCode == "uEmail"
        ) {
          let regu = /@/;
          let re = new RegExp(regu);
          if (!re.test(formList[i].attribute.filedValue)) {
            ifCheckAll = false;
            this.$toast(this.thisNav ? "请填写正确邮箱" : "Please enter");
            break;
          }
        } else if (
          formList[i].attribute.ifCheck &&
          formList[i].attribute.filedValue &&
          formList[i].attribute.filedCode == "uIdCard" &&
          this.thisNav &&
          this.isChangeType &&
          !idcardReg(formList[i].attribute.filedValue)
        ) {
          this.$toast(`请填写正确${formList[i].attribute.titName}`);
          ifCheckAll = false;
          break;
        } else if (
          formList[i].attribute.ifCheck &&
          formList[i].attribute.filedValue &&
          formList[i].attribute.filedCode == "uTel" &&
          !/^\d+$/.test(formList[i].attribute.filedValue)
        ) {
          ifCheckAll = false;
          this.$toast(this.thisNav ? "请填写正确的手机号码" : "Please enter");
          break;
        } else if (
          formList[i].attribute.ifCheck &&
          formList[i].attribute.filedValue &&
          formList[i].attribute.filedCode == "uTel" &&
          formList[i].attribute.areaCode == "86" &&
          formList[i].attribute.filedValue.length != 11
        ) {
          ifCheckAll = false;
          this.$toast(this.thisNav ? "请填写正确的手机号码" : "Please enter");
          break;
        } else if (
          formList[i].attribute.filedCode == "uTel" &&
          !formList[i].attribute.areaCode
        ) {
          ifCheckAll = false;
          this.$toast(this.thisNav ? "请点击选择手机区号" : "Please enter");
          break;
        }
      }
      return new Promise((resolve, reject) => {
        resolve(ifCheckAll);
      });
    }
  }
};
</script>

<style >
/* .uncan-right-icon {
  width: 270px;
  height: auto;
  position: absolute;
  right: 0px;
  top: -26px;
}
.uncan-right-icon > img {
  width: 100%;
  height: auto;
} */

.from-saveBtn {
  /* position: absolute;
  left: 0px;
  bottom: 0px; */
  width: 100%;
  height: 110px;
  background: #2b2d31;
  /* font-family: PingFangSC-Regular; */
  font-size: 36px;
  color: #eeeeee;
  text-align: center;
  cursor: pointer;
}

.from-saveBtn-ifAgree {
  background-image: linear-gradient(-116deg, #3cb9ff 0%, #6044d4 100%);
}
.from-saveBtn:active {
  opacity: 0.8;
}
.from-box {
  width: 100%;
  height: auto;
  padding: 0px 5%;
  margin-top: 16px;
  z-index: 2;
}
.from-tit {
  width: 100%;
  height: auto;
  text-align: left;
  /* font-family: PingFangSC-Regular; */
  font-size: 22px;
  color: #b9b9bb;
}
.from-tit > img {
  width: 26px;
  height: auto;
  margin-right: 6px;
}
.from {
  width: 100%;
  height: auto;
  min-height: 160px;
  background: rgba(0, 0, 0, 0.4);
  /* border: 1px solid rgba(93, 93, 93, 0.2); */
  /* border: 1px solid #38383b; */
  padding: 0px 0px;
  margin-top: 16px;
  /* position: absolute;
  left: 5%;
  top: 328px; */
}
.from-item {
  width: 100%;
  height: auto;
}
.from > div:last-of-type > div {
  border-bottom: none;
}
/* 组件input样式 */
.from-input-box {
  width: 100%;
  height: auto;
  min-height: 100px;
  position: relative;
  border-bottom: 1px solid rgba(151, 151, 151, 0.2);
  padding: 6px 1px;
}
.from-input-tit {
  width: auto;
  max-width: 146px;
  height: auto;
  min-height: 100px;
  /* font-family: PingFangSC-Regular; */
  font-size: 28px;
  color: #ffffff;
  text-align: left;
  padding: 1px 6px 0px 0px;
  position: relative;
}
.select-phone {
  position: absolute;
  right: -76px;
  top: 0px;
  width: auto;
  min-width: 66px;
  height: 100%;
  cursor: pointer;
  z-index: 3;
}
.from-input-tit-check {
  margin-right: 1px;
}
.checkNot {
  opacity: 0;
}
.from-input {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding-left: 156px;
  padding-right: 46px;
  /* font-family: PingFangSC-Regular; */
  font-size: 28px;
  color: #fff;
  text-align: left;
}
.from-input-eng {
  padding-left: 176px;
}
.from-input-right-icon {
  position: absolute;
  right: 0px;
  top: 0px;
  width: auto;
  height: 100%;
}
.from-input-right-icon > img {
  width: 36px;
  height: auto;
}
.haveSelectPhone {
  padding-left: 236px;
}
.select-phone > img {
  width: 30px;
}
.from-input {
  text-align: left;
}

.agree-box {
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 24px;
  margin-top: 26px;
  color: #fff;
}
.agree-check {
  width: 35px;
  height: auto;
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}
.agree-check > img {
  width: 100%;
  height: auto;
  margin-top: 10px;
}
.agree-box > a,
.agree-box > span {
  cursor: pointer;
}
.agree-box > a {
  text-decoration: underline;
}
.getCode-box {
  width: 152px;
  height: 100%;
  position: absolute;
  right: -30px;
  top: 0px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.1);
  background: #2b2d31;
  cursor: pointer;
}
.getCode {
  font-size: 26px;
  color: #fff;
  width: 100%;
  height: auto;
  /* background: #2b2d31; */
  padding: 10px 0px;
}
</style>
<style scoped>
.padding-top {
  padding-top: 100px;
}
.container-nav-fix-box {
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 99;
  width: 100%;
  height: auto;
}
.container-nav-box {
  width: 100%;
  height: 90px;
  background: rgb(49, 51, 57);
}
.container-nav {
  width: 50%;
  height: 100%;
  font-size: 30px;
  color: #fff;
  position: relative;
  cursor: pointer;
}
.nav-borderBottom {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 30%;
  left: 35%;
  height: 2px;
}
</style>

<style  scoped>
.email-alert {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 100;
  display: flex;
  -webkit-display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.email-box {
  width: 82%;
  height: auto;
  background: #fff;
  padding: 38px 36px;
}

.email-tit {
  width: 100%;
  text-align: left;
  height: auto;
  font-size: 36px;
  color: #3a3a3a;
}

.email-input {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #ededed;
  margin: 36px 16px;
}

.email-input > input {
  width: 100%;
  height: auto;
  text-align: left;
  font-size: 36px;
  padding: 10px 6px;
}

.email-btn {
  width: 100%;
  height: auto;
  background-image: linear-gradient(-116deg, #3cb9ff 0%, #6044d4 100%);
  box-shadow: 0 4px 5px 0 rgba(255, 255, 255, 0.05);
  font-size: 30px;
  color: #ffffff;
  padding: 19px 10px;
  margin-top: 36px;
}
.Agre-box {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.Agre-tit {
  font-size: 26px;
  text-align: left;
}
.Agre-img {
  float: left;
}
.Agre-img > img {
  width: 30px;
  height: auto;
  float: left;
}
.readAndAgree {
  font-size: 30px;
}
</style>
